<template>
<div type="primary" @click="beginlogin" class="login" href="javascript:;">管理员入口</div>
    <!-- 弹出的页面内容 -->
    <div id="login-box" :style="log==0?'display:none':'display:block;zIndex:40'">
            <form action="">
                <select id="skills" name="skills">
			        <option value="admin">管理员</option>
			        <option value="traffic">交通管理人员</option>
                </select>
                <label>用户:
                    <input v-model="uname" type="text" placeholder="请输入用户名...">
                </label>
                <label>密码:
                    <input v-model="upwd" type="password" placeholder="请输入密码...">
                </label>
                <button type="button" @click="login2">登录</button>
                <p id="close" @click="close">×</p>
            </form>
        </div>

        <div id="back" :style="log==0?'display:none':'display:block'"></div>
</template>

<script setup>
import {ref,computed} from 'vue'
import axios from "axios"
import router from '../router';
  const log=ref(0);
  let uname;
  let upwd;

  
 var loginBox = document.getElementById("login-box");

  const beginlogin=()=>{
    log.value=1
    
  }
  const login2=()=>{
    if(uname == '') {
        message.error('用户名不能为空');
      }else if(upwd == '') {
        message.error('密码不能为空');
      }else{
        axios.get('http://127.0.0.1/login/manager', {
          params: {
            name: uname,
            password: upwd ,
            type:skills.value
                }
        }).then(res=>{
          if(res.data.status == 200) {

            router.push({
              path: '/home',
              query: {
                name: uname
              }
            })
          }else{
            alert('用户名或密码错误', '登录失败', {
              confirmButtonText: '确定',
              callback: action => {
                uname = '',
                upwd = ''
              }
            });
          }
        }).catch(err=>{
            console.log("登录失败" + err);
        })
      }
        }
  const close=()=>{
            log.value=0;
            //清空input中的内容
            uname="";
            upwd="";
            
        }

</script>
<style scoped>
.login:hover{
  box-shadow: 0px 0px 20px 5px gray;
}
.login{
    float:right;
  background-color: rgba(0, 0, 0, 0.8);
  width:120px;
  line-height:40px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-style:unset;
  color:ghostwhite;
  box-shadow: 0px 0px 20px 1px gray;
  margin-top: -65px;
  margin-right: 50px;
  position: relative;
	z-index: 11;

}
/*登陆框*/
#login-box{
    margin:0px auto;

position:absolute; left:50%; transform:translate(-50%,-50%);
        float:right;
        padding: 20px;
        display:none;
        width:350px;
        height: 200px;
        position: relative;
        border-radius: 5px;
        position: absolute;
        background-color: #a8a8a8;
        background-image: linear-gradient(0deg, #a8a8a8 88%, #545454 89%, #6d6969 100%);
       
        margin-top: -400px;
        z-index: 200;
    }
    #login-box>form{
        text-align: center;
    }
    #login-box label{
        display: block;
        font-size: 20px;
        margin: 20px 0 0 0;
    }
    #login-box label input{
        width:200px;
        height: 30px;
    }
    #login-box button{
        width:200px;
        height: 30px;
        margin:20px 0 0 0;
        width:90px;
        border-radius: 5px;
    }
    #close{
        font-size:18px;
        position: absolute;
        top:0;
        right: 5px;
        cursor: pointer;
    }
    /*背景*/
    #back{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background: #000;
        opacity: 0.5;
        z-index: 12;
    }
</style>